<template>
	<view>
		<view class="swiper">
			 <up-swiper :list="list1" height="630rpx"  indicator></up-swiper>
			 <view class="sitebox">
				 <view class="sitetit">{{list.name}}</view>
				 <view class="sitetext">{{list.intro}}</view>
				 <view class="listdz">
					 <view class="dizbox">
						<up-icon name="map" color="#10c696" size="14"></up-icon>
						<view class="">{{list.places.address}}</view>
					 </view>
					 <view class="">距您{{list.distance}}</view>
					 
				 </view>
				 <view class="xc"></view>
				<view class="stielet">
					<view class="steli">球馆介绍</view>
				</view>
				<view class="xiangq">
					<view class="">营业时间：{{list.places.start_time}}-{{list.places.end_time}}</view>
					<view class="">咨询热线：{{list.places.mobile}}</view>
					<view class="jieshao">{{list.intro}}</view>
				</view>
			 </view>
		</view>
		<view class="buttan">
			<!-- <view class="keletf" @click="changefx">
				<up-icon name="server-fill" color="#10c696" size="28"></up-icon>
				咨询
			</view> -->
			<button class="keletf" open-type="contact">
				<up-icon name="server-fill" color="#10c696" size="28"></up-icon>
				咨询
			</button>
			<view class="rent" @click="gotobac">整租预约</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted} from 'vue';
import request from '../../utils/request';
import {onLoad} from '@dcloudio/uni-app'
let venueId=ref()
let token=ref()let latitude = ref() // 纬度
let longitude = ref()
let venid=ref()
let type=ref()
onLoad((options)=>{
	token.value=uni.getStorageSync('token')
	latitude.value=uni.getStorageSync('latitude')
	longitude.value=uni.getStorageSync('longitude')
	if (options && options.id) {
	    venueId.value = decodeURIComponent(options.id);
		request.post('Price/read',{
			data:{
				id:venueId.value,
				lng:longitude.value,
				lat:latitude.value
			},
			header:{
				"token":token.value
			}
		}).then(res=>{
			console.log(res);
			list.value=res.data
			list1.value=res.data.places.images
			num.value=res.data.num
			console.log(list1.value);
			uni.setStorageSync("price_id",res.data.id )
		}).catch(err=>{
			console.log(err);
		})
	}
})
let num=ref()
let list =ref([])
let list1=ref(['/static/logo.png'])	
const gotobac=()=>{
	
	uni.navigateTo({
		url:`/pages/mytiem/mytiem?num=${num.value}`
	})
}
const changefx=()=>{
	
}
</script>

<style scoped lang="scss">
	.swiper{
		width: 100%;
		height: 630rpx;
	}
	.sitebox{
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 600rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
	}
	.sitetit{
		margin-top: 30rpx;
		margin-left: 26rpx;
		margin-bottom: 28rpx;
	}
	.sitetext{
		font-size: 13px;
		color: #5f5f5f;
		margin-left: 26rpx;
		margin-bottom: 40rpx;
	}
	.listdz{
		display: flex;
		align-items: center;
		padding: 0 26rpx;
		box-sizing: border-box;
		justify-content: space-between;
		font-size: 13px;
		color: #5f5f5f;
		padding-bottom: 20rpx;
	}
	.dizbox{
		display: flex;
		align-items: center;
	}
	.xc{
		width: 100%;
		height: 10rpx;
		background-color: #f9f9f9;
	}
	.stielet{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #cecece;
	}
	.steli{
		height: 30rpx;
		line-height: 30rpx;
		padding-left: 40rpx;
		border-left:4rpx  #10c696  solid ;
	}
	.xiangq{
		padding: 0 30rpx;
		padding-top: 46rpx;
		font-size: 14px;
	}
	.jieshao{
		margin-top: 46rpx;
	}
	.buttan{
		width: 100%;
		height: 96rpx;
		position: fixed;
		bottom: 0;
		box-shadow: 0 0 16px -6px rgba(0, 0, 0, .3);
		display: flex;
	}
	
	button {
		padding: 0 !important;
		margin: 0 !important;
		background-color: transparent;
		
		&::after {
			border: 0 !important;
		}
	}
	.keletf{
		width: 160rpx;
		height: 96rpx;
		background-color: #fff;
		display: flex;
		flex-wrap: nowrap;
		font-size: 12px;
		align-items: center;
		justify-content: center;
	}
	.rent{
		width: 592rpx;
		background-color:#10c696 ;
		height: 96rpx;
		line-height: 96rpx;
		color: #fff;
		text-align: center;
	}
	
</style>
